<template>
  <div class="service-task-query-div">

    <div class="query-div">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="用户ID">
          <el-input v-model="queryForm.userId" placeholder="用户ID"></el-input>
        </el-form-item>
        <el-form-item label="用户手机">
          <el-input v-model="queryForm.userPhone" placeholder="用户手机"></el-input>
        </el-form-item>
        <el-form-item label="请求类型">
          <el-select v-model="queryForm.taskType" placeholder="请求类型">
            <el-option v-for="item in selectTaskTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="queryForm.operateStatus" placeholder="处理状态">
            <el-option v-for="item in operateStatusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户请求时间">
          <div class="block">
            <el-date-picker v-model="queryForm.userReqTime" type="datetimerange" :picker-options="pickerOptions" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="客服跟踪时间">
          <div class="block">
            <el-date-picker v-model="queryForm.operateTime" type="datetimerange" :picker-options="pickerOptions" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
          </div>
        </el-form-item>

        <!--管理员可查看内容-->
        <el-form-item label="客服ID">
          <el-select v-model="queryForm.taskType" placeholder="客服ID">
            <el-option v-for="item in selectServiceList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model="queryForm.userType" placeholder="用户类型">
            <el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <br/>
        <el-form-item style="height: 40px">
          <el-button type="info" size="mini" @click="initQueryForm">重置</el-button>
          <el-button type="primary" size="mini" @click="queryFormOnSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  export default {
    components: {},
    name: 'ServiceTaskQueryDiv',
    data () {
      return {
        selectTaskTypeList: [],
        selectServiceList: [],
        userTypeOptions: [
          { value: 'YYLC', label: '盈盈理财' },
          { value: 'YYX', label: '盈优选' }
        ],
        operateStatusOptions: [
          { value: 1, label: '未处理' },
          { value: 2, label: '跟进中' },
          { value: 3, label: '已完成' },
          { value: 4, label: '无需处理' },
          { value: 5, label: '已加微信' },
          { value: 7, label: '处理失败' }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]);}
          }, {
            text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); }
          }, {
            text: '最近三个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', [start, end]); }
          }]
        },
        queryForm: {
          serviceId: '',
          userId: '',
          userPhone: '',
          taskType: '',
          operateStatus: 1,
          userType: 'YYLC',
          userReqTime: ['', ''], // 用户请求时间
          operateTime: ['', ''], // 客服跟踪时间
        },
      }
    },
    created() {
      this.loadSelectTaskTypeList();
      this.loadServiceList();
      this.$parent.loadServiceTaskList(this.queryForm);
    },
    methods: {
      initQueryForm() {
        this.queryForm.serviceId = '';
        this.queryForm.userId = '';
        this.queryForm.userPhone = '';
        this.queryForm.taskType = '';
        this.queryForm.operateStatus = 1;
        this.queryForm.userType = 'YYLC';
        this.queryForm.userReqTime = ['', ''];
        this.queryForm.operateTime = ['', ''];
        this.$parent.loadServiceTaskList(this.queryForm);
      },
      queryFormOnSubmit() {
        this.$parent.loadServiceTaskList(this.queryForm);
      },

      // 加载任务类型列表
      loadSelectTaskTypeList() {
        this.selectTaskTypeList = [];
        this.$http.get("/api/type/list", {}, {emulateJSON: true}).then((res) => {
          if (this.checkResponse(res)) {
            let typeList = res.body.data;
            for (let i = 0; i < typeList.length; i++) {
              this.selectTaskTypeList.push({
                value: typeList[i].taskCode,
                label: (i+1) + '. ' + typeList[i].taskName
              });
            }
          }
        }).catch((e) => { this.messageException(e); });
      },
      loadServiceList() {
        this.selectServiceList = [];
        this.$http.get("/api/customer/list", {}, {emulateJSON: true}).then((res) => {
          if (this.checkResponse(res)) {
            let typeList = res.body.data;
            for (let i = 0; i < typeList.length; i++) {
              this.selectServiceList.push({
                value: typeList[i].id,
                label: typeList[i].id + ' - ' + typeList[i].name
              });
            }
          }
        }).catch((e) => { this.messageException(e); });
      }
    }
  }
</script>

<style lang="less" scoped>
  .service-task-query-div {
  }

  .query-div {
    margin: 5px;
    text-align: center;

    .el-form-item {
      margin: 1px;
    }
  }
</style>
